<template>
  <view class='cartContainer'>
    <!-- 收货地址 -->
    <my-address></my-address>
    
    <view class="title">
      <!-- <uni-icons type="cart" size="18"></uni-icons> -->
      <text class="titleText">购物车</text>
    </view>

    <view class="cart" v-if='JSON.stringify(cart)!=="[]"'>
      <uni-swipe-action>
        <block v-for='(goods,index) in cart' :key='index'>
          <uni-swipe-action-item :right-options='options' class='item' @click='swiperItemClickHandler(goods.goods_id)'>
            <myGoodItem :price="goods.goods_price" :img="goods.goods_small_logo" :title="goods.goods_name"
              :idx='goods.goods_id' :state='goods.goods_state' :showRaido="true" @radioChange='radioChange'
              :count="goods.goods_count" :showNumber='true' @NumChange='NumChange'></myGoodItem>
          </uni-swipe-action-item>
        </block>
      </uni-swipe-action>
    </view>
    
    <view class="emptyCart" v-else>
      <image src="/static/cart_empty@2x.png" mode="widthFix" class='empty'></image>
    </view>
    
    <!-- 结算组件 -->
    <view class="settle">
      <my-settle></my-settle>
    </view>
  </view>
</template>

<script>
  import {
    mapGetters,
    mapState,
    mapMutations
  } from 'vuex';
  import tabbarMixin from '@/mixin/tabbar-badge.js';
  export default {
    mixins: [tabbarMixin],
    methods: {
      ...mapMutations('cart', ['IPDATEGOODSSTATE', 'UPDATEGOODSCOUNT','REMOVEGOODSBYID']),
      radioChange(goods) {
        this.IPDATEGOODSSTATE(goods);
      },
      NumChange(goods) {
        this.UPDATEGOODSCOUNT(goods);
      },
      swiperItemClickHandler(id){
        this.REMOVEGOODSBYID(id);
      },
    },

    computed: {
      ...mapState('cart', ['cart']),
    },
    data() {
      return {
          options:[{
            text:'删除',
            style:{
              backgroundColor:'#C00000',
            }
          }]
      };
    }
  }
</script>

<style lang="scss" scoped>
  .cartContainer{
    padding-bottom: 50px;
  }
  .title {
    height: 40px;
    display: flex;
    align-items: center;
    padding-left: 5px;
    border-bottom: 1px solid #ddd;

    .titleText {
      font-size: 14px;
      margin-left: 10px;
      font-weight: bold;
    }
  }
  .cart{
    .item{
      width: 750x;
    }
  }
  .settle{
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 999;
  }
  .emptyCart{
    .empty{
      width:375rpx;
      display: block;
      margin: 0 auto;
      margin-top: 80px;
    }
  }
</style>
